<template>
  <div class="editor-container">
    <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        class="editor-toolbar"
    />
    <Editor
        :defaultConfig="editorConfig"
        v-model="valueHtml"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        class="editor-content"
        :style="{ height: `${minHeight}px`, overflowY: 'hidden' }"
    />
  </div>
</template>

<script setup>
import {onBeforeUnmount, ref, shallowRef, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import {getToken} from "@/utils/auth.js";

// 定义props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  minHeight: {
    type: Number,
    default: 400 // 确保默认高度大于300px
  }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

// 模式
const mode = ref('default')

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [] // 可以排除不需要的工具栏项目
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  autoFocus: false,        // 取消自动获取焦点
  scroll: true,           // 允许滚动
  maxLength: 100000,      // 最大字符数
  MENU_CONF: {
    uploadImage: {
      server: 'http://192.168.1.12:2000/apis/oss/api/upload',
      // 上传图片的最大数量
      maxNumberOfFiles: 10,
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 5 * 1024 * 1024,
      // 最多可上传几个文件，默认为 100
      maxLength: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      // 自定义上传参数，例如传递token等
      meta: {
        // token: 'xxx'
      },
      // 自定义增加 http  header
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      // 自定义图片上传字段名
      fieldName: 'file',
      // 上传之前触发
      onBeforeUpload(file) {
        return file
      },
      // 上传进度的回调函数
      onProgress(progress) {
        console.log('progress', progress)
      },
      // 单个文件上传成功之后
      onSuccess(file, res) {
        console.log('success', file, res)
      },
      // 单个文件上传失败
      onError(file, err, res) {
        console.log('error', file, err, res)
      },
      // 自定义插入图片
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        console.log(res)
        if (res != null){
          // insertFn 可把图片插入到编辑器
          insertFn(res.data.url, '', res.data.url)
        }
      }
    }
  },
  // 添加HTML处理配置
  HTML_CONFIG: {
    // 保留这些标签和它们的属性
    parseHTMLTag: {
      // 保留所有标签
      allTags: true,
      // 保留这些属性
      attrs: [
        'class',
        'style',
        'src',
        'alt',
        'href',
        'target',
        'loading',
        'title',
        'id'
      ]
    }
  },
  // 保留更多样式
  PRESERVE_HTML_TAGS: true,
}


// 内容处理函数
const processContent = (html) => {
  if (!html) return ''

  // 保护特定的标签结构
  return html.replace(/<article/g, '<div')
      .replace(/<\/article>/g, '</div>')
      .replace(/<section/g, '<div')
      .replace(/<\/section>/g, '</div>')
      .replace(/<figure/g, '<div')
      .replace(/<\/figure>/g, '</div>')
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 编辑器创建完成时的回调
const handleCreated = (editor) => {
  editorRef.value = editor
  // 处理初始内容
  valueHtml.value = processContent(props.modelValue)
}

// 编辑器内容变化时的回调
const handleChange = (editor) => {
  const html = editor.getHtml()
  // 保存时重新处理内容
  emit('update:modelValue', html)
}

// 编辑器销毁时的回调
const handleDestroyed = (editor) => {
  editorRef.value = null
}

// 监听 props.modelValue 的变化
watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal !== valueHtml.value) {
        // 处理新内容
        valueHtml.value = processContent(newVal)
      }
    }
)
</script>

<style scoped>
.editor-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  border: 1px solid #ccc;
  z-index: 100; /* 防止编辑器被其他元素遮挡 */
}

.editor-toolbar {
  border-bottom: 1px solid #ccc;
  border-bottom: none;
}

.editor-content {
  border: 1px solid #ccc;
  min-height: v-bind('props.minHeight + "px"');
}

:deep(.w-e-text-container [data-slate-editor]) {
  padding: 0 10px;
}

/* 设置编辑区域的最小高度和滚动 */
.w-e-text-container {
  min-height: 300px !important;  /* 确保最小高度 */
  height: auto !important;
  overflow-y: auto !important;
}

/* 修复工具栏样式 */
.w-e-toolbar {
  border-bottom: 1px solid #ccc !important;
  flex-wrap: wrap !important;
}

/* 修复菜单项样式 */
.w-e-bar-item {
  padding: 4px 6px !important;
}

/* 确保编辑器内容区域有足够空间 */
.w-e-text-container [data-slate-editor] {
  min-height: 300px !important;
  padding: 0 10px !important;
}

/* 设置图片上传区域样式 */
.w-e-upload {
  padding: 16px !important;
}

/* 设置下拉菜单样式 */
.w-e-dropdown-menu {
  z-index: 10001 !important;
}

/* 添加内容样式 */
:deep(.w-e-text-container) {
  /* 段落样式 */
  .article-paragraph {
    margin: 1em 0;
    line-height: 1.6;
  }

  /* 图片容器样式 */
  .article-image {
    margin: 1.5em 0;
    text-align: center;

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
  }

  /* 标题样式 */
  .section-heading {
    margin: 1.5em 0 1em;
    font-size: 1.5em;
    font-weight: bold;
  }

  /* 引导段落样式 */
  .lead-paragraph {
    font-size: 1.1em;
    color: #4a5568;
    margin: 1em 0;
  }
}

/* 编辑器内容区域的基本样式 */
:deep(.w-e-text-container [data-slate-editor]) {
  padding: 20px !important;
  font-size: 16px;
  line-height: 1.8;
  color: #2d3748;
}
</style>